<template>
  <!-- 账户标签页面 -->
  <section class="page log-detail">
    <data-box
      :data="dataSet"
      :page="pageService"
      :sort="sortService"
      @onPageChange="refreshData"
      :height="400"
    >
      <template slot="columns">
        <el-table-column
          prop="agentName"
          label="操作人"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="maintainDate"
          label="操作时间"
          :formatter="row => $filter.dateTimeFormat(row.maintainDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="applyType"
          label="变更类型"
          :min-width="$helper.getColumnWidth(3)"
          :formatter="row => $filter.dictConvert(row.applyType, 'ApplyType')"
        >
        </el-table-column>
        <el-table-column
          prop="applyType"
          label="审批状态"
          :min-width="$helper.getColumnWidth(3)"
          :formatter="
            row =>
              row.applyType === 'ADD'
                ? '---'
                : $filter.dictConvert(row.applyStatus, 'ApplyStatus')
          "
        >
        </el-table-column>
        <el-table-column prop="personalName" label="修改后策略的内容">
          <template slot-scope="scope">
            <el-button type="text" @click="onClickDetailLog(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>
    <div class="confirm-button">
      <el-button @click="emitClose">关闭</el-button>
    </div>

    <!-- 查看 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog"
      title="案件调整类型审批"
      :close-on-press-escape="false"
      append-to-body
      @open="
        $nextTick(() => {
          $refs['add-change-type'].dataHandler();
        })
      "
      width="700px"
    >
      <add-change-type
        @close="dialog = false"
        ref="add-change-type"
        :row="rowData"
        :isEdit="false"
        :isDetail="true"
        :isApply="true"
      />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from "vue-property-decorator";
import { Dependencies, Layout } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { Getter, namespace, State } from "vuex-class";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";
import AddChangeType from "~/components/customer-group-management/add-change-type.vue";

@Layout("workspace")
@Component({
  components: {
    AddChangeType
  }
})
export default class LogDetail extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;

  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;
  @Prop() private row;
  private dataSet: any[] = [];
  private dialog = false;
  private rowData: any = {};
  private isTagMenu: boolean = true;

  @Emit("close") private emitClose() {}

  private refreshData() {
    this.dataSet = [];
    this.customerGroupManageService
      .findCaseAdjustTypeLogs({ id: this.row.id }, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private onClickDetailLog(row) {
    this.dialog = true;
    this.rowData = row;
  }
}
</script>

<style lang="less" scoped></style>
